<template>
	<view class="">
		<view
			:id="'good' + item.id"
			v-for="(item, ind) in order_list"
			:key="ind"
			class="item u-margin-left-30 u-margin-right-30 u-margin-top-50 u-margin-bottom-60 u-col-top u-flex u-row-between u-padding-top-15 u-padding-left-30 u-padding-right-20"
			@click="goto_detail(item)"
		>
			<view class="u-flex-col u-row-around item-left">
				<text class="house_name u-font-34 ">{{ item.room_info.house_name }}</text>
				<text v-if="item.type_flag == 1">会员时间</text>
				<text v-if="item.type_flag == 1">{{ $u.timeFormat(item.start_time, 'yy-mm-dd') }} - {{ $u.timeFormat(item.end_time, 'yy-mm-dd') }}</text>
				<text v-if="item.type_flag == 2">入住时间</text>
				<text v-if="item.type_flag == 2">{{ $u.timeFormat(item.start_time, 'mm月dd日') }}-{{ $u.timeFormat(item.end_time, 'mm月dd日') }}</text>
				<!-- v-if="index == 0 || index == 1" -->
				<text class="oneLine-noWrap" style="width: 260rpx;">订单号：{{ item.order_num }}</text>
				<view class="">
					<text>总数量：</text>
					<text class="price u-margin-left-10">{{ item.goods_num }}</text>
				</view>
				<view class="" v-if="index == 0">
					<text>待支付：</text>
					<text class="user_price u-margin-left-10">{{ item.order_price }}</text>
				</view>
			</view>
			<view class="">
				<view class="house_img u-margin-bottom-20 ">
					<!-- <text>{{$u.timeFormat(tem.start_time, 'yyyy年mm月dd日')}}</text> -->
					<u-image width="360rpx" height="255rpx" duration="300" :border-radius="10" :src="item.goods_info.img" :fade="true">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<!-- <u-image v-if="item.type_flag == 1" width="360rpx" height="255rpx" duration="300" :border-radius="10" :src="item.vip_img" :fade="true">
						<u-loading slot="loading"></u-loading>
					</u-image> -->
					<view class="hinfo_name u-flex u-row-center">
						<text class="hinfo_name_text oneLine-noWrap">{{ item.goods_info.good_name }}</text>
					</view>
				</view>
				<view v-if="index == 0 || index == 1" class="u-flex buttons u-row-between">
					<u-button
						v-if="index == 0"
						size="mini"
						:custom-style="{ width: '150rpx', transform: 'translateY(-30rpx)' }"
						@click="goto_detail(item)"
						:ripple="true"
						shape="circle"
					>
						支付
					</u-button>
					<u-button
						v-if="index == 0"
						size="mini"
						type="error"
						:custom-style="{ width: '150rpx', transform: 'translateY(-30rpx)' }"
						@click="cancelOrder(item)"
						:ripple="true"
						shape="circle"
					>
						取消
					</u-button>
					<u-button
						v-if="index == 1"
						size="mini"
						type="error"
						:custom-style="{ width: '350rpx', transform: 'translateY(-30rpx)' }"
						@click="cancelOrder(item)"
						:ripple="true"
						shape="circle"
					>
						取消
					</u-button>
				</view>

				<u-button
					v-if="index == 99"
					size="mini"
					:custom-style="{ width: '360rpx', transform: 'translateY(-30rpx)' }"
					:ripple="true"
					shape="circle"
					@click="goto_detail(item)"
				>
					查看详情
				</u-button>
			</view>
		</view>

		<u-modal @confirm="confirm" v-model="modal_show" :show-cancel-button="true" content="您确定要关闭此订单吗？"></u-modal>
	</view>
</template>

<script>
export default {
	name: 'Item',
	data() {
		return {
			modal_show: false,
			item: {}
		};
	},
	methods: {
		// 点击确定
		confirm() {
			this.$u.api.goods_order_del({ id: this.item.id }).then(res => {
				if (res.code == 1) {
					this.Refresh();
				}
				this.item = {};
			});
		},

		// 取消订单
		cancelOrder(item) {
			this.modal_show = true;
			this.item = item;
		},
		// 刷新列表
		Refresh() {
			// let page = Math.ceil(this.order_list.length / 10);
			// this.$emit('downCallback' , page);
			this.$emit('downCallback');
		},

		goto_detail(item) {
			this.$u.route({
				url: 'pages/goods_order/orderDetails',
				params: {
					id: item.id,
					index: this.index // 订单类型
				}
			});
			// this.$u.route({
			// 	url: 'pages/goods/goods_info',
			// 	params: {
			// 		id: item.goods_id
			// 	}
			// });
		}
	},
	props: {
		index: {
			// 当前tab的下标
			type: Number,
			default() {
				return 0;
			}
		},
		order_list: {
			type: Array,
			default: () => []
		}
	}
};
</script>

<style lang="scss" scoped>
.buttons {
	// background-color: red;
}

.price {
	color: #ff9900;
}
.user_price {
	color: #e04b28;
}
.item {
	box-shadow: 0rpx 0rpx 14rpx 0rpx #999;
	border-radius: 10rpx;
}

.item-left {
	height: 255rpx;
}

.house_name {
	font-weight: 700;
	color: #000000;
}

.hinfo_name_text {
	color: #ffffff;
}

.hinfo_name {
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	background-color: rgba(0, 0, 0, 0.5);
	width: 360rpx;
	font-size: 30rpx;
	padding: 5rpx 0rpx;
	border-bottom-left-radius: 10rpx;
	border-bottom-right-radius: 10rpx;
}

.house_img {
	position: relative;
	width: 360rpx;
	height: 255rpx;
	transform: translateY(-35rpx);
	box-shadow: 0rpx 0rpx 14rpx 0rpx #ddd;
}
</style>
